<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团队预约</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            display: flex;
            justify-content: center; /* 居中对齐 */
            align-items: center;
            height: 100vh; /* 填充整个屏幕 */
            background-color: #f9f9f9;
        }

        .container {
            width: 100%;
            max-width: 393px; /* 设置最大宽度为393px */
            height: 853px; /* 设置页面高度为853px */
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            overflow: auto;
        }

        /* 返回按钮样式 */
        .back-btn {
            background-color: #ddd;
            color: black;
            border: 1px solid #ddd;
            padding: 8px 16px; /* 默认的padding */
            font-size: 14px; /* 设置按钮字体大小 */
            border-radius: 4px;
            cursor: pointer;
            position: absolute;
            top: 10px; /* 距离顶部10px */
            left: 10px; /* 距离左边10px */
            width: 100px; /* 按钮宽度 */
            height: 60px; /* 按钮高度 */
            text-align: center; /* 文字居中 */
        }

        .back-btn:hover {
            background-color: #e9ecef;
        }

        /* 标题样式 */
        h1 {
            font-size: 18px;
            font-weight: bold;
            text-align: center; /* 标题居中 */
            margin-top: 50px; /* 增加标题与按钮的间距 */
        }

        /* 表单样式 */
        label {
            display: block;
            margin-top: 12px;
            font-weight: bold;
            font-size: 14px;
        }

        input, select, button {
            width: 100%;
            padding: 10px;
            margin-top: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .btn {
            background-color: #007bff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        /* 调整表单元素的间距 */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group input[type="file"] {
            padding: 6px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 返回按钮 -->
        <button class="back-btn" onclick="window.location.href='/groups'">返回</button>

        <!-- 标题 -->
        <h1>团队预约</h1>

        <!-- 表单内容 -->
        <form method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label for="date">选择日期:</label>
                <input type="date" id="date" name="date" required min="{{ today }}" max="{{ max_date }}">
            </div>

            <div class="form-group">
                <label for="time">选择时间段:</label>
                <select id="time" name="time" required>
                    <option value="6:00-12:00">6:00-12:00</option>
                    <option value="12:00-18:00">12:00-18:00</option>
                </select>
            </div>

            <div class="form-group">
                <label for="team_size">团队人数:</label>
                <input type="number" id="team_size" name="team_size" min="1" required>
            </div>

            <div class="form-group">
                <label for="contact_name">联系人姓名:</label>
                <input type="text" id="contact_name" name="contact_name" required>
            </div>

            <div class="form-group">
                <label for="contact_phone">联系人电话:</label>
                <input type="text" id="contact_phone" name="contact_phone" required>
            </div>

            <div class="form-group">
                <label for="file">导入团队信息 (Excel 文件):</label>
                <input type="file" id="file" name="file" accept=".xlsx, .xls">
            </div>

            <button type="submit" class="btn">提交预约</button>
        </form>
    </div>

    <script>
        // JavaScript to set today's date and max date (7 days later)
        const today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
        const maxDate = new Date();
        maxDate.setDate(maxDate.getDate() + 7); // Set max date to 7 days from today
        const maxDateString = maxDate.toISOString().split('T')[0];

        document.getElementById('date').setAttribute('min', today);
        document.getElementById('date').setAttribute('max', maxDateString);
    </script>
</body>
</html>
